<template>

  <a-page-header
    style="margin-left: 0px"
    title="需求处理"
    :sub-title="subTitle"
  />

  <div id="menu">
    <a-menu
      id="dddddd"
      style="width: 178px; height: 100%; position: relative; top: 10px"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      @select="selectMenu"
      @deselect="selectMenu"
    >

      <a-menu-item key="1">
        <align-left-outlined />
        <span>待审核需求</span>
      </a-menu-item>

      <a-menu-item key="2">
        <carry-out-outlined />
        <span>历史审核需求</span>
      </a-menu-item>

      <a-menu-item key="3">
        <history-outlined />
        <span>已拒绝需求</span>
      </a-menu-item>
    </a-menu>
    <br />
    <br />
  </div>

  <div
    v-if="waitGet"
    style="width: 85%; height: 85%; position: absolute; left: 192px; top: 43px"
  >
    <br />
    <br />

    <a-input-search
      v-model:value="tempSCV"
      @blur.native.capture="searchReset"
      placeholder="请输入需求名"
      class="searchInput"
      size="small"
      @search="onSearch"
      @pressEnter="onSearch"
    />
    <br />
    <br />

    <div v-show="visible1" style="margin-left: 25px">
      
      <!-- 需求列表为空提示 -->
      <div v-if="data.reqList.length == 0">
        <a-empty />
      </div>


      <div v-else>

        <!-- 表格栏 -->
        <div class="myBar">
        <b class="b1">需求名及描述</b>
        <b class="b2">申请人ID</b>
        <b class="b3">需求模式</b>
        <b class="b4">需求体量</b>
        <b class="b5">需求状态</b>
        <b class="b6">审核操作</b>
        </div>
        <!-- 需求展示列表 -->
        <div style="margin-left:-10px">
        <a-list
          bodered
          split:true
          class="demo-loadmore-list"
          :loading="loading"
          item-layout="horizontal"
          :data-source="data.reqList"
          :pagination="pagination"
        >
          <!-- 底部footer -->
          <template #footer>
            <div style="margin-top: 15px">
              <b>需求审理</b>
              <text style="color: green; margin-left: 10px"
                >查询、处理用户需求</text
              >
            </div>
          </template>

          <!-- 需求展示 -->
          <template #renderItem="{ item }">
            <div
              v-if="
                searchValue == 0 ||
                searchValue == null ||
                item.title.includes(searchValue)
              "
            >
              <!-- 控制需求类别可见 -->
              <div v-if="item.stage == reqVisible">
                <a-list-item>
                  <template #actions style="width:20%">
                    <div class="oper">

                      <a-button
                        class="openBtn"
                        @click="openSingleDetailShow(item)"
                        ghost
                        >展开详情
                        <template #icon>
                          <left-circle-outlined />
                        </template>
                      </a-button>


                      <a-popconfirm
                        v-if="item.stage == 0"
                        title="确认通过审核么"
                        @confirm="updStage(item)"
                      >
                        <template #icon
                          ><question-circle-outlined style="color: red"
                        /></template>
                        <a href="#" style="margin-left: 10px; color: #1e73e2"
                          >通过申请
                        </a>
                      </a-popconfirm>

                    </div>
                  </template>

                  <a-list-item-meta>
                    <template #avatar>

                      <a-avatar class="statAvatar">
                        <template #icon>
                          <profile-outlined class="icons" />
                        </template>
                      </a-avatar>

                    </template>

                    <template #title>
                      <b>
                        {{ item.title }}
                      </b>
                    </template>

                    <template #description>
                      <a
                        class="descriptions_a"
                        @click="openSingleDetailShow(item)"
                        ><div v-if="item.description" style="display:inline-block">
                        {{ item.description.substring(0, 20) }}
                        </div> 
                        <div v-if="item.description.length>=20" style="display:inline-block">
                          <b>...</b>
                          </div>                     
                        </a>
                        
                     

                    </template>


                  </a-list-item-meta>

                  <div style="width: 7%; margin-right: 3%">
                    <user-outlined class="icon_demander" />
                    {{ item.user_id }}
                  </div>

                  <div style="width:4%;margin-right: 3%">
                    {{ item.mode }}
                  </div>

                  <div style="width: 5%; margin-right: 3%">
                    <bars-outlined />
                    {{ item.size }}
                  </div>

                  <div style="width: 6%; margin-right: -5%">

                    <span v-if="item.stage == 0">
                      <text style="color: #1578f8">待审核</text>
                    </span>
                    <span v-else-if="item.stage == 1">
                      <text style="color: #3fc416">已初步审核</text>
                    </span>
                    <span v-else-if="item.stage == -1">
                      <text style="color: #f35757">已拒绝</text>
                    </span>

                  </div>

                </a-list-item>
              </div>
            </div>
          </template>
        </a-list>
        </div>
      </div>
    </div>
  </div>

  <!-- <a-button @click="setVis" type="danger" ghost style="margin-top: 20px"
    >setvis</a-button
  > -->
  <!-- 搜索例子 -->
  <!-- <div>
     <b>wdnmd</b>
     <div v-for="item in data.reqList">
     <div v-show="searchValue==0||item.request_id==searchValue||searchValue==null">
        <b>{{item.request_id}}</b>
     </div>
     </div>
  </div> -->


  <!-- 抽屉展示详细信息 -->
  
 
  <div>
  <a-drawer
    :width="800"
    :visible="visibleDrw"
    placement="right"
    @close="onClose"

    >
    <template #title>
      <b> 需求详细信息</b>
    </template>

    <a-descriptions size="middle" bordered style="margin-top: 10px">

      <a-descriptions-item label="需求标题"
        ><b>
          {{ showInfoFormat.value.title }}
        </b>
        </a-descriptions-item>

      <a-descriptions-item label="需求ID">{{
        showInfoFormat.value.request_id
      }}</a-descriptions-item>

      <a-descriptions-item label="申请人ID">{{
        showInfoFormat.value.user_id
      }}</a-descriptions-item>
      <a-descriptions-item label="创建日期">
        <div v-if="showInfoFormat.value.create_time">{{
        showInfoFormat.value.create_time.substring(0, 10)
      }}</div>
      </a-descriptions-item>

      <a-descriptions-item label="要求完成时间" :span="2">
        <div v-if="showInfoFormat.value.deadline">{{
        showInfoFormat.value.deadline.substring(0, 10) +
        "  " +
        showInfoFormat.value.deadline.substring(11, 19)
      }}</div></a-descriptions-item>

      <a-descriptions-item label="当前状态" :span="3">
        <div v-if="showInfoFormat.value.stage == 0">
          <a-badge status="processing"></a-badge>
          <span><b>待审核</b></span>
        </div>

        <div v-else-if="showInfoFormat.value.stage == 1">
          <a-badge color="green"></a-badge>
          <span><b>已初步审核</b></span>
        </div>

        <div v-else-if="showInfoFormat.value.stage == -1">
          <a-badge color="red"></a-badge>
          <span><b>已拒绝请求</b></span>
        </div>
      </a-descriptions-item>

      <a-descriptions-item label="需求体量" :span="2">{{
        showInfoFormat.value.size
      }}</a-descriptions-item>

      <a-descriptions-item label="需求模板">{{
        showInfoFormat.value.mode
      }}</a-descriptions-item>

      <a-descriptions-item label="详细描述">
        <textarea
          disabled="true"
          style="width: 600px; height: 150px; margin-left: -20px"
          >{{ showInfoFormat.value.description }}</textarea
        >
      </a-descriptions-item>
    </a-descriptions>

    <span>
      <a-popconfirm
        :title="confirmText"
        @confirm="updStage(showInfoFormat.value)"
        v-show="okVisible"
      >
        <template #icon>
          <question-circle-outlined style="color: red" />
        </template>
        <a-button class="okBtn" bodered>{{ checkBtnValue }}</a-button>
      </a-popconfirm>
    </span>

    <a-button @click="onClose">返回</a-button>

    <a-popconfirm
      class="popcon"
      title="确认拒绝此需求么"
      @confirm="refuseReqApply(showInfoFormat.value)"
    >

      <template #icon>
        <question-circle-outlined style="color: red" />
      </template>

      <a-button
        v-show="refuVisible"
        type="danger"
        style="margin-left: 450px; position: relative"
        >{{ refuText }}
      </a-button>

    </a-popconfirm>
  </a-drawer>
  </div>
</template>





<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { get, post, setLocalToken, tip } from "@/common";
import { message } from "ant-design-vue";
import {
  QuestionCircleOutlined,
  DesktopOutlined,
  AlignLeftOutlined,
  CarryOutOutlined,
  HistoryOutlined,
  UserOutlined,
  ProfileOutlined,
  BarsOutlined,
  LeftCircleOutlined,
} from "@ant-design/icons-vue";
// 图标引入


const router = useRouter();
const visible1 = ref(true);
const setVis = () => {
  visible1.value = !visible1.value;
};



//分页

const pagination = {
  onChange: (page) => {
    console.log(page);
  },
  pageSize: 10,
};


//搜索

const searchValue = ref();
const tempSCV = ref();

const onSearch = () => {
  searchValue.value = tempSCV.value;
  console.log("搜索目标值" + searchValue);
};

const searchReset = () => {
  searchValue.value = null;
  tempSCV.value = null;
};



//菜单控制

const state = reactive({
  selectedKeys: [],
  openKeys: [],
});

const reqVisible = ref(0);
const refuVisible = ref(true);
const refuText = ref("拒绝此需求");
const subTitle = ref("需求列表");
const checkBtnValue = ref("通过审核");
const confirmText = ref("确认通过么？");
const okVisible = ref(true);

const selectMenu = ({ item, key, selectedKeys }) => {
  console.log(state.selectedKeys);

  if (key == 1) {
    console.log(key);
    reqVisible.value = 0;
    refuVisible.value = true;
    refuText.value = "拒绝此需求";
    subTitle.value = "待审核需求";
    checkBtnValue.value = "通过审核";
    confirmText.value = "确认通过么？";
    // state.selectedKeys.push("1")
    console.log(state.selectedKeys);
  }
  else if (key == 2) {
    console.log(key);
    reqVisible.value = 1;
    refuVisible.value = true;
    refuText.value = "驳回此需求";
    subTitle.value = "已审核需求";
    // state.selectedKeys.push("2")
  }
  else if (key == 3) {
    console.log(key);
    reqVisible.value = -1;
    refuVisible.value = false;
    subTitle.value = "待审核需求";
    checkBtnValue.value = "重启此需求";
    confirmText.value = "确认重启此需求么？";
    // state.selectedKeys.push("3")
  }
};


//查询所有需求

const data = reactive({
  reqList: [{}],
});
const waitGet = ref(false);
const dataSource = ref(data.reqList);

const getInfo = () => {
  get("/checker/info").then((res) => {
    console.log(res.data);
    data.reqList = res.data;
    console.log(data.reqList);
  });
  waitGet.value = true;
};

getInfo();




//需求记录描述展开窗口

const showInfoFormat = reactive({});
const visibleDrw = ref(false);
const refusedReq = reactive({});

const openSingleDetailShow = (req) => {
  console.log("需求描述信息为");
  console.log(req.description);
  showInfoFormat.value = req;
  console.log("已选中的需求记录:");
  console.log(showInfoFormat.value);
  visibleDrw.value = true;
};




const refuseReqApply = (temp) => {
  refusedReq.value = temp;
  console.log(refusedReq);

  post("/checker/refuReq?request_id=" + refusedReq.value.request_id).then(
    (res) => {
      console.log(res);
      message.success(res.message);
      getInfo();
      onClose();
    }
  );
};

const onClose = () => {
  visibleDrw.value = false;
  visibletest.value=false;
  console.log(state.selectedKeys);
};



//修改需求审核状态

const selectedReq = reactive({
  request_id: "",
  stage: 0,
});


const updStage = (temp) => {
  selectedReq.request_id = temp.request_id;
  selectedReq.stage = temp.stage;
  console.log(selectedReq.request_id);

  post("/checker/updStage", selectedReq).then((res) => {
    console.log(res);
    message.success(res.message);
    // router.push({path:'/checker/examine'})
    getInfo();
    console.log("wdnmd");
    onClose();
  });
};
</script>




<style>

.statAvatar {
  background-color: #f58012;
}

.icons {
  color: #0f0f0d;
}

.descriptions_a {
  color: #0f0f0d;
}

.icon_demander {
  color: #0f91e7;
}

.okBtn {
  margin-right: 8px;
  margin-top: 20px;
  background-color: rgb(22, 202, 22);
  color: white;
}

.demo-loadmore-list {
  margin-top: 15px;
}

.openBtn {
  color: #0f0d0d;
}

.searchInput {
  width: 150px;
  margin-top: -5px;
  margin-left: 20px;
  color: #1578f8;
}
.oper{
  width: 200px; 
  margin-right: 10px;
}
.myBar{
  margin-left:-10px;
  direction:rtl
}
.b1{
  margin-right: 45%
}
.b2{
margin-right: 4%
}
.b3{
margin-right: 3%
}
.b4{
margin-right: 4%
}
.b5{
margin-right: 5%
}
.b6{
width:200px;
text-align: left;
margin-right: 100px;
}
</style>